<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./css/plus.css">
    <link rel="stylesheet" href="./iconfonts/iconfont.css">
</head>

<body>
    <!-- 头部 -->

    <!-- 头部区域开始 -->
    <div id="header">
        <div class="header-con">
            <!-- 左侧导航 -->
            <ul class="header-nav">
                <li> <a href="index.html" style="color: #ccc;">小米商城</a> |&nbsp;</li>
                <li>MIUI |&nbsp;</li>
                <li>loT |&nbsp;</li>
                <li>云服务 |&nbsp;</li>
                <li>水滴 |&nbsp;</li>
                <li>金融 |&nbsp;</li>
                <li>有品 |&nbsp;</li>
                <li>Select Region</li>
            </ul>
            <!-- 右侧导航 -->
            <div class="header-right">
                <div id="welcomeBox">
                    欢迎您：<span id="usernameSpan"></span>
                    &nbsp;&nbsp;<input id="btnLogout" type="button" value="注销" />
                </div>
                <div id="loginBox">
                    <a href="login.html">&nbsp;&nbsp;登录</a>
                </div>
                <a href="reginset.html">&nbsp;&nbsp;注册 &nbsp;&nbsp;</a>
                <a href="#">消息通知&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <!-- 购物车显示区域 -->
                <p class="Cart">
                    <a href="./cart.html" style="color: black;"> <i class="iconfont icon-gouwuchekong
                    "></i>购物车</a>
                </p>
                <!-- 显示购物车 -->
                <div class="p-cart">
                    购物车中还没有商品赶紧买吧
                </div>
            </div>
        </div>
    </div>
    <!-- 头部区域开始 -->
    <div id="head">
        <div class="head-con">
            <h1> <img src="./images/phonepic/logo-mi2.png" alt=""></h1>
            <h3>我的购物车</h3>
            <span>温馨提示:产品是否购买成功，以最终下单为准哦，请尽快结算 <a href="detail.html" style="color:orange;">详情页</a>
            </span>

        </div>
    </div>
    <!-- 购物车 -->
    <div id="car">
        <div class="car-con">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" id="" checked> 全选
                        </th>
                        <th>
                            商品名称
                        </th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="goods">

                    <tr>
                        <td>继续购物</td>
                        <!-- 总数量 -->
                        <td>
                            共 <span id="item" style="  color: #ff6700;"></span>件商品
                        </td>
                        <!-- 总计 -->
                        <td colspan="2" style="  color: #ff6700;">合计: <span class="total"
                                style="font-size: 30px;">0</span>元</td>
                        <td colspan="2">
                            <input type="button" value="去结算" id="last">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 继续购物 -->
    <div id="shopping">
        <div class="shopping-con">
            <h1>买购物车中商品的人还购买了</h1>
            <ul class="farewell">

            </ul>
        </div>
    </div>
    <!-- 结束 -->
    <div id="footer">
        <div class="footer-con">
            <!-- footer头部 -->
            <ul class="footer-top">
                <li><i class="iconfont icon-weixiu"></i> 预约维修服务</li>
                <li><i class="iconfont icon-qitianwuliyoutuihuan"></i> 7天无理由退货</li>
                <li><i class="iconfont icon-15"></i> 15天免费退货</li>
                <li><i class="iconfont icon-liwu"></i> 源69包邮</li>
                <li><i class="iconfont icon-dizhiguanli"></i> 502家售后网店</li>
            </ul>
            <!-- 内容导航 -->
            <dl class="footer-nav">
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl class="footer-nav">
                <dt>服务支持</dt>
                <dd>售后服务</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl class="footer-nav">
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd>
            </dl>
            <dl class="footer-nav">
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd>
                <dd>企业社会责任关系</dd>
                <dd>廉洁举报</dd>
            </dl>
            <dl class="footer-nav">
                <dt>关注我们</dt>
                <dd>新浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd>
                <dd>公益基金会</dd>
            </dl>
            <dl class="footer-nav">
                <dt>特色服务</dt>
                <dd>F码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>
            <div class="footer-right">
                <img src="./images/kf_03.png" alt="">
            </div>
        </div>
    </div>
    <!-- 公示-->
    <div id="item">
        <div class="item-con">
            <h1><img src="./images/logo.jpg" alt=""></h1>
            <a href="#">小米商城 |</a>
            <a href="#">MIUI |</a>
            <a href="#">米家 |</a>
            <a href="#">米聊 |</a>
            <a href="#">多看 |</a>
            <a href="#">游戏 |</a>
            <a href="#">政企服务 |</a>
            <a href="#">小米天猫店 |</a>
            <a href="#">小米集团隐私政策 |</a>
            <a href="#">小米公司儿童信息保护规则 |</a>
            <a href="#">小米商城隐私政策 |</a>
            <a href="#">小米商城用户协议 |</a>
            <a href="#">问题反馈 |</a> <br>
            <a href="#">北京互联网发原法律服务工作站 |</a>
            <a href="#">中国消费者协会</a>
            <a href="#">北京市消费者协会</a>
            <p>mi.com京ICP证110507号京ICP备10046444号京公网安备11010802020134号京网文[2020]0276-042号
                (京)网械平台备字(2018）第00005号互联网药品信息服务资格证(京)-非经营性-2014-0090营业执照医疗器械质量公告增值电信业务许可证网络食品经营备案京食药网食备202010048食品经营许可证
                违法和不良信息举报电话:171-5104-4404-知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
            </p>
            <div class="item-footer">
                <img src="./images/end_03.png" alt="">
            </div>
            <!-- 侧边导航 -->
            <div class="r-nav">
                <ul class="nav-end">
                    <li>
                        <a href="#"><img src="./images/phonepic/o1.png" alt=""></a>
                        <p>手机APP</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o2.png" alt=""></a>
                        <p>个人中心</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o3.png" alt=""></a>
                        <p>售后服务</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                        <p>人工客服</p>
                    </li>
                    <li>
                        <a href="#"><img src="./images/phonepic/o5.png" alt=""></a>
                        <p>购物车</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/cookieTools.js"></script>

<script>
    // ajxa 请求获取cookie 用户名
    $(function () {
        let username = getCookie("username");
        $.ajax({
            url: './getShoppingCart.php',
            method: 'get',
            data: {
                vipName: username,
            },
            success: function (result) {
                getPhoneData(JSON.parse(result))

            }
        })
    })
    // 将取出来的数据插入到表格中
    function getPhoneData(res) {
        // console.log();
        for (let i = 0; i < res.length; i++) {
            let otr = $('<tr></tr>')
            let otbody = $('.goods')
            otr.html(
                `
          
                        <td>
                            <input type="checkbox" name="" id="" checked>
                        </td>
                        <td>
                            <img src="${res[i].goodsImg}" alt="">
                            <a href="#">${res[i].goodsName}</a>
                        </td>
                       
                        <td>
                            <span id="price">${res[i].goodsPrice}</span>元
                        </td>
                    
                        <td>
                            <button id="compute">-</button>
                            <span id="number">${res[i].goodsCount}</span>
                            <button id="compute">+</button>
                        </td>
                     
                        <td style=" color: #ff6700;">
                            <span class="subtotal">${res[i].goodsPrice*res[i].goodsCount}</span>元
                        </td>
                        <td>
                            <button id="remove">×</button>
                        </td>
              
            
            `
            ).appendTo(otbody.prev());
        }
        class Cart {
            constructor() {

            }
            //1.获取商品的总数量
            getGoodsNum() {
                // 获取数量
                let oGoodsNum = document.querySelectorAll('#number');

                //获取总数量
                let oGoodsTotalNum = document.querySelector('#item');

                let ooodsTotalNum = 0;
                //对数量进行遍历循环
                for (let i = 0; i < oGoodsNum.length; i++) {
                    ooodsTotalNum += Number(oGoodsNum[i].innerHTML);
                }
                oGoodsTotalNum.innerHTML = ooodsTotalNum;
            }
            //2.获取商品的总金额
            getGoodsPrice() {
                //获取小计
                let oGoodsSinglePrice = document.querySelectorAll('.subtotal');
                //获取总金额
                let oGoodsTotalPrice = document.querySelector('.total');
                let ogoodsTotalPrice = 0;

                for (let i = 0; i < oGoodsSinglePrice.length; i++) {
                    ogoodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
                }
                oGoodsTotalPrice.innerHTML = ogoodsTotalPrice;
            }
            //3.获取小计
            getPrice(num, price) {
                return num * price;
            }
            // 4. 增加商品
            addGoods(btn) {
                //1.获取数量
                let ogoodsnum = btn.previousElementSibling;
                ogoodsnum.innerHTML = Number(ogoodsnum.innerHTML) + 1;
                //2.获取单价
                let ogoodsunitprice = btn.parentNode.previousElementSibling.firstElementChild;
                //3.获取小计
                let ogoodssingleprice = btn.parentNode.nextElementSibling.firstElementChild;
                ogoodssingleprice.innerHTML = this.getPrice(ogoodsunitprice.innerHTML, ogoodsnum.innerHTML);

                this.getGoodsNum();
                this.getGoodsPrice();
            }
            //5.减少商品
            minGoods(btn) {
                //1.获取数量
                let ogoodsnum = btn.nextElementSibling;
                if (ogoodsnum.innerHTML > 0) {
                    ogoodsnum.innerHTML = Number(ogoodsnum.innerHTML) - 1;
                    //2.获取单价
                    let ogoodsunitprice = btn.parentNode.previousElementSibling.firstElementChild;
                    //3.获取小计
                    let ogoodssingleprice = btn.parentNode.nextElementSibling.firstElementChild;
                    ogoodssingleprice.innerHTML = this.getPrice(ogoodsunitprice.innerHTML, ogoodsnum.innerHTML);

                    this.getGoodsNum();
                    this.getGoodsPrice();
                }

            }
            //删除商品
            delGoods(btn) {
                let otr = btn.parentNode.parentNode;
                otr.remove();
                this.getGoodsNum();
                this.getGoodsPrice();
            }
            //追加商品
            sumGoods(btn) {
                //1.获取第一个tbody
                let tbody = document.querySelector('tbody');
                //2.获取新增的商品的名字
                let GoodsName = btn.parentNode.previousElementSibling.previousElementSibling.firstElementChild
                    .nextElementSibling.innerHTML;
                // 获取图片
                let Goodsimg = btn.parentNode.previousElementSibling.previousElementSibling.firstElementChild
                    .innerHTML;
                console.log(Goodsimg);
                //3.获取新增商品的单价
                let GoodsPrice = btn.parentNode.previousElementSibling.firstElementChild.innerHTML;

                // 4.设置变量
                let flag = false;
                //5.设置下标
                let index = 0;
                //循环遍历上面的表格
                for (let i = 0; i < tbody.children.length - 1; i++) {
                    if (tbody.children[i].children[1].children[1].innerHTML == GoodsName) {
                        flag = true;
                        index = i;
                        break;
                    }
                }
                //如果flag为true
                if (flag) {
                    // 数量
                    tbody.children[index].children[3].children[1].innerHTML = Number(tbody.children[index].children[
                            3]
                        .children[1].innerHTML) + 1
                    // 数量
                    let SL = tbody.children[index].children[3].children[1].innerHTML;
                    //单价
                    let DJ = tbody.children[index].children[2].firstElementChild;
                    //小计
                    let XJ = tbody.children[index].children[4].firstElementChild;

                    XJ.innerHTML = this.getPrice(SL, DJ.innerHTML);
                } else {
                    let tr = document.createElement('tr');
                    tr.innerHTML = `
                <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td>
                            <img src="./images/2.webp" alt="">
                            <a href="#">${GoodsName}</a>
                        </td>
                        <!-- 单价 -->
                        <td>
                            <span id="price">200</span>元
                        </td>
                        <!-- 数量 -->
                        <td>
                            <button id="compute">-</button>
                            <span id="number">0</span>
                            <button id="compute">+</button>
                        </td>
                        <!-- 小计 -->
                        <td style=" color: #ff6700;">
                            <span class="subtotal">0</span>元
                        </td>
                        <td>
                            <button id="remove">×</button>
                        </td>
                `;
                    tbody.insertBefore(tr, tbody.lastElementChild);
                }
                this.getGoodsPrice();
                this.getGoodsNum();
                this.eventBind();
            }
            //测试
            eventBind() {
                this.getGoodsNum();
                this.getGoodsPrice();
                let that = this;
                let obtn = document.querySelectorAll('#compute');
                for (let i = 0; i < obtn.length; i++) {
                    if (i % 2) {
                        obtn[i].onclick = function () {
                            that.addGoods(this);
                        }
                    } else {
                        obtn[i].onclick = function () {
                            that.minGoods(this);
                        }
                    }
                }
                // 删除商品
                let btn = document.querySelectorAll('#remove');
                for (let i = 0; i < btn.length; i++) {
                    btn[i].onclick = function () {
                        alert("这次真的要说再见了");
                        // 删除商品
                        let username = getCookie("username");
                        // console.log(username);

                        // 点击删除按钮进行删除
                        console.log(111);
                        $.ajax({
                            url: './deleteGoods.php',
                            method: 'GET',
                            data: {
                                vipName: username,
                                goodsId: res[i].goodsId
                            },
                            success(res) {
                                delGood(res)
                            }
                        })

                    }

                    function delGood(res) {
                        console.log(res);
                        if (res == 1) {
                            // 重新渲染页面
                            window.location.reload()
                            that.delGoods(this);
                        }

                    }
                }
                //追加商品
                let obtns = document.querySelectorAll('#increase');
                for (let i = 0; i < obtns.length; i++) {
                    obtns[i].onclick = function () {
                        that.sumGoods(this);
                    }
                }

            }


        }

        let x = new Cart();
        x.eventBind();
    }



    // cookie
    function initUI() {
        let username = getCookie("username");
        if (username) {
            $("#usernameSpan").html(username);
            $("#welcomeBox").css({
                "display": "block"
            });
            $("#loginBox").css({
                "display": "none"
            });
        } else {
            $("#loginBox").css({
                "display": "block"
            });
            $("#welcomeBox").css({
                "display": "none"
            });
        }
    }

    $(function () {
        initUI();
        $("#btnLogout").click(function () {
            removeCookie("username");
            initUI();
        });
    });

    // 购物车接受数据
    $.ajax({
        url: "getGoodsList.php",
        method: "GET",
        data: {
            typeId: '003'
        },
        success: function (result) {
            getShopData(JSON.parse(result))
            // console.log(result);
        }
    })

    function getShopData(res) {
        for (let i = 0; i < res.length; i++) {
            let lis = $('<li></li>')
            let oul = $('.farewell')
            lis.html(`
            <a href="#"><img src="${res[i].goodsImg}" alt=""></a>
                    <p>${res[i].goodsName}</p>
                    <h4>${res[i].goodsPrice}<i>元</i></h4>
                    <span>${res[i].goodsDesc}<i>人好评</i></span>
                    <div class="bottom">加入购物车</div>
            `).appendTo(oul)
        }
    }

    $('#last').click(function () {
        window.location.href = 'oa.html'
    })
</script>